<template>
	<view class="category">
		<!-- 搜索栏 -->
		<u-search placeholder="请输入搜索的内容" :showAction='false'inputAlign='center' margin="16rpx" v-model="keyword"></u-search>
		
		<!-- 内容区 -->
		<u-row>
			<u-col span="3">
				<view class="categoryLeft">
					<u-list :height="screenHeight">
						<view class="categoryLeft-name" :class="{active:index === nav}" v-for="(item,index) in categoryDatas" :key="item.id" @click="changeCategory(item,index)">
							{{item.name}}
						</view>
					</u-list>
				</view>
			</u-col>
			<u-col span="9">
				<view class="categoryRight">
					<u-list :height="screenHeight">
						<image class="categoryRight-bigImg" :src="bigImg" mode=""></image>
						<u-grid :border="false">
							<u-grid-item v-for="item in categoryRight" :key="item.id">
								<image class="categoryRight-smallImg" :src="item.wapBannerUrl" mode=""></image>
								<text class="categoryRight-name">{{item.name}}</text>
							</u-grid-item>
						</u-grid>
					</u-list>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import request from '../../api/index.js';
	export default {
		data() {
			return {
				keyword:'',
				//导航选中标识
				nav:0,
				//分类总数据
				categoryDatas:[],
				//分类大图
				bigImg:'',
				//右侧数据
				categoryRight:[],
				//页面高度
				screenHeight:0
			}
		},
		methods: {
			//获取数据
			async	getCategoryList(){
				const res = await request('/getCategoryDatas')
				this.categoryDatas = res.categoryDatas
				this.categoryRight = res.categoryDatas[0].subCateList
				this.bigImg = res.categoryDatas[0].imgUrl
			},
			//切换左侧分类按钮
			changeCategory(item,index){
				// console.log(item)
				this.categoryRight = item.subCateList
				this.nav = index
				this.bigImg = item.imgUrl
				console.log(this.categoryRight)
			}
		},
		mounted() {
			this.getCategoryList()
			//获取页面高度
			this.screenHeight = uni.getSystemInfoSync().windowHeight - 51; //获取当前页面的高度
		}
	}
</script>
	
<style lang="scss" scoped>
.categoryLeft{
	border-top:2rpx solid  #bb2c08;
	border-right:2rpx solid  #bb2c08;
	.categoryLeft-name{
		position: relative;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		&.active::before{
			content: '';
			width: 4rpx;
			height: 56rpx;
			background-color: #bb2c08;
			position: absolute;
			top: 8rpx;
			left: 14rpx;
		}
	}
}
.categoryRight{
	border-top:2rpx solid  #bb2c08;
	.categoryRight-bigImg{
		margin: 8rpx auto;
		height: 250rpx;
		width: 520rpx;
	}
	.categoryRight-smallImg{
		width: 180rpx;
		height: 140rpx;
	}
	.categoryRight-name{
		font-size: 28rpx;
	}
}
</style>
